// import React, { useState, useEffect } from "react";
import React, { useState, useLayoutEffect } from "react";

/*
  useLayoutEffect 与 useEffect 的区别：

- `useEffect` 是异步执行的，而`useLayoutEffect`是同步执行的。
- `useEffect` 的执行时机是浏览器完成渲染之后，
而 `useLayoutEffect` 的执行时机是浏览器把内容真正渲染到界面之前

一般情况下官方推荐使用 `useEffect`，因为 `useLayoutEffect` 会阻塞浏览器的渲染，
但是如果你需要在浏览器渲染之前获取一些 DOM 信息（css的样式相关的内容），那么就可以使用 `useLayoutEffect`。
*/

const App = () => {
  const [width, setWidth] = useState(100);

  // useEffect(() => {
  //   setWidth(300);
  // }, []);

  // useLayoutEffect的语法和useEffect一样
  useLayoutEffect(() => {
    setWidth(300);
  }, []);

  return (
    <>
      <h2>useLayoutEffect</h2>
      <div style={{ width: width, height: 300, background: "red" }}></div>
    </>
  );
};

export default App;
